<template>
    <div>
        <div style="height: 100%;">
            <vxe-table :data.sync="reqlogList" :loading="reqlogLoading" height="auto" highlight-current-row highlight-hover-row resizable header-align="center" show-overflow="tooltip" show-header-overflow="tooltip" size="mini" border stripe column-width="100px" 
            :tree-config="{ children: 'children', expandAll: false }" :select-config="{ labelField: 'log_content' }" 
            :fit="false" @cell-dblclick="logDblClick" :cell-class-name="columnClassName" ref="tablelog">
                <!-- <vxe-table-column field="reportid" title="报告ID" width="120px" align="center" tree-node></vxe-table-column> -->
                <vxe-table-column field="log_date" title="操作日期" width="120px" align="center"></vxe-table-column>
                <vxe-table-column field="trans_type" title="操作类型" width="80px" align="center" :formatter="['formatSelectList', reqstatOption]"></vxe-table-column>
                <vxe-table-column field="log_content" title="操作内容" width="220px" tree-node>
                    <template v-slot="{ row }">
                        <div style="max-width: 180px; display: inline-block">{{ row.log_content }}</div>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="username" title="操作者" width="100px" align="center"></vxe-table-column>
                <vxe-table-column field="ref_user" title="相关人" width="100px"></vxe-table-column>
                <vxe-table-column field="labgroupid" title="工作组" width="100px"></vxe-table-column>
                <vxe-table-column field="computer_name" title="操作时机器名" width="100px">
                    <template v-slot="{ row }">
                        <span style="color:blue;">{{row.computer_name}}</span>
                        <i class="el-icon-refresh" @click="repalceComputerName(row)"></i>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="mac_address" title="操作时机器MAC" width="100px"></vxe-table-column>
                <vxe-table-column field="syncflag" title="同步HIS标志" width="100px"></vxe-table-column>
                <vxe-table-column field="synctime" title="同步时间" width="100px"></vxe-table-column>
                <vxe-table-column field="syncerrtext" title="同步失败信息" width="100px"></vxe-table-column>
            </vxe-table>
        </div>
        
        <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="detailDialog" title="检验报告修改详细内容" top="5vh" width="800px">
            <vxe-table :data.sync="rptlogDetail" ref="xTableRptLog" height="400px" :loading="rptLogDetailloading" 
                :sort-config="{ trigger: 'cell' }" show-overflow border size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable stripe>
                <vxe-table-column field="rpt_logid" title="日志明细ID" width="100" sortable header-align="center"></vxe-table-column>
                <vxe-table-column field="objecttype" title="修改类型" width="100" sortable header-align="center"></vxe-table-column>
                <vxe-table-column field="columnname" title="修改对象" width="160" sortable header-align="center"></vxe-table-column>
                <vxe-table-column field="oldvalue" title="修改/复查前取值" width="160" sortable header-align="center"></vxe-table-column>
                <vxe-table-column field="newvalue" title="修改/复查后取值" width="160" sortable header-align="center"></vxe-table-column>
            </vxe-table>
        </el-dialog>
    </div>
</template>

<script>
import XE from "xe-utils"; //引入工具类
XE.mixin({
    // 自定义全局的格式化处理函数
    formatSelectList(cellValue, list) {
        // console.log("cellValue",cellValue);
        // console.log("list",list);
        let item = list.find((item) => item.data == cellValue);
        return item ? item.display : "";
    },
});
export default {
    name: "rm_reqlog",
    props: {
        reqlogList: {
            type: Array,
            default: () => {},
            require: true,
        },
        reqstatOption: {
            type: Array,
            default: () => {},
            require: true,
        },
    },
    data() {
        return {
            reqlogLoading: false,
            detailDialog: false,
            rptlogDetail: [],
            rptLogDetailloading: false,
        }
    },
    methods: {
        logDblClick({ row, rowIndex }) {
            if (row.hasOwnProperty("rpt_logid")) {
                this.queryLogDetail(row.rpt_logid);
                this.detailDialog = true;
            }
        },
        columnClassName({ seq, row, rowIndex, $rowIndex, column }) {
            if (column.property == "trans_type") {
                if (row.trans_type == "报告日志" || row.trans_type=="无纸化") return "reportlogclass";
            }
        },
        queryLogDetail(logid) {
            this.rptLogDetailloading = true;
            this.$tool
                .request({
                    url: "/ucent/reportlog",
                    method: "post",
                    data: {
                        action: "getReportlogdetail",
                        rpt_logid: logid,
                    },
                })
                .then((res) => {
                    if (res.errcode == "1") {
                        this.rptlogDetail = res.Data;
                    }
                    this.rptLogDetailloading = false;
                });
        },
        repalceComputerName(row) {
            this.$pub.getComputerName(row.mac_address)
                .then((name)=> {
                    row.computer_name = name;
                })
                .catch(()=> {
                    this.$message.error("机器名称查询失败！");
                    //保持原样
                });
        },
    },
}
</script>

<style>

</style>